<html>
<head>
    <title>Title</title>
    <style>
        th, td {
            text-align: center;
            padding: 0px 10px;
        }

        th[colspan] {
            text-align: left;
        }
    </style>
</head>
<body>
<div id="app">
    Index.html
    <a href="javascript:void(0)" @click="insert"><h2>新增用户</h2></a>
    <a href="javascript:void(0)" @click="refresh"><h2>刷新缓存</h2></a>

    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>OPENID</th>
            <th>性别</th>
            <th>婚姻状况</th>
            <th>扩展属性</th>
            <th>创建时间</th>
            <th>最后修改时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="user in list">
            <th>{{user.id}}</th>
            <th>{{user.openId}}</th>
            <th>{{user.gender}}</th>
            <th>{{user.marriage}}</th>
            <th>{{user.properties}}</th>
            <th>{{user.createTime}}</th>
            <th>{{user.lastModifiedTime}}</th>
            <th>
                <a href="javascript:;" @click="see(user)">查看</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="javascript:;" @click="update(user)">不刷新缓存修改OPENID</a>
            </th>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <th colspan="5">&nbsp;</th>
        </tr>
        <tr>
            <th colspan="5">查看详情</th>
        </tr>
        <tr>
            <th>{{seeUser.id}}</th>
            <th>{{seeUser.openId}}</th>
            <th>{{seeUser.gender}}</th>
            <th>{{seeUser.marriage}}</th>
            <th>{{seeUser.properties}}</th>
            <th>{{seeUser.createTime}}</th>
            <th>{{seeUser.lastModifiedTime}}</th>
            <th></th>
        </tr>
        </tfoot>
    </table>
</div>
</body>
<script type="text/javascript" src="/resources/vue/vue.min.js"></script>
<script type="text/javascript" src="/resources/axios/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: [],
            seeUser: {}
        },
        methods: {
            reload: function () {
                axios.get('/users/pagination', {
                    params: {page: 1, rows: 20}
                }).then(function (response) {
                    app.list = response.data.items;
                }).catch(function (error) {
                });
            },
            see: function (user) {
                axios.get('/users/' + user.id).then(function (response) {
                    app.seeUser = response.data;
                    alert('操作成功')
                }).catch(function (error) {
                    alert('操作失败')
                });
            },
            insert: function () {
                axios.post('/users').then(function (response) {
                    app.reload();
                    alert('操作成功')
                }).catch(function (error) {
                    alert('操作失败')
                });
            },
            update: function (user) {
                axios.put('/users', {id: user.id}).then(function (response) {
                    app.reload();
                    alert('操作成功,table中的数据已更新,\n但是点击查看按钮,显示的数据仍然未更新,\n因为table数据未从缓存获取,而点击查看按钮获取的数据从缓存获取了')
                }).catch(function (error) {
                    alert('操作失败')
                });
            },
            refresh: function () {
                axios.post('/refresh').then(function (response) {
                    app.reload();
                    alert('操作成功')
                }).catch(function (error) {
                    alert('操作失败')
                });
            }
        },
        created: function () {
            this.reload();
        }
    });
</script>
</html>
